<template>
  <div >
    <div class="detailBanner" v-if="!gallaryShow" @click="showGallary">
      <router-link to="/" class="backCircle">
        <i class="iconfont icon-topleftarror"></i>
      </router-link>
      <img :src="bannerImg" class="bannerImg">
      <div class="bannerInfo">
        <div class="banner-title">{{sightName}}</div>
        <div class="banner-number" @click="showGallary">
          <i class="iconfont icon-topleftarror"></i>
          <span class="banner-number-text">10</span>
        </div>
      </div>
    </div>
    <gallary v-if="gallaryShow" :gallaryImgs="gallaryImgs" @closeGallary="closeGallary"></gallary>
  </div>
</template>
<script>
import Gallary from '@/common/gallary/Gallary'
export default {
  components: {Gallary},
  name: 'DetailBanner',
  props: {
    sightName: String,
    gallaryImgs: Array,
    bannerImg: String
  },
  data: function () {
    return {
      gallaryShow: false
    }
  },
  methods: {
    showGallary () {
      this.gallaryShow = true
    },
    closeGallary () {
      this.gallaryShow = false
    }
  }
}
</script>
<style lang="stylus" scoped>
  .detailBanner >>> .iconfont
                      font-size .36rem
                      color #fff
  .detailBanner
    width 100%
    height 0
    overflow hidden
    padding-bottom 55%
    position: relative;
    .bannerImg
      width 100%
    .backCircle
      width .72rem
      height .72rem
      border-radius .36rem
      background-color #000
      opacity .5
      position absolute
      top .1rem
      left .1rem
      color #fff
      text-align center
      line-height .72rem
    .bannerInfo
      display flex
      justify-content space-between
      width 90%
      height .4rem
      position absolute
      bottom .4rem
      color #ffffff
      padding 0 .5rem 0 .5rem
      .banner-title
        font-size: .36rem;
        text-shadow: 0 1px 2px rgba(0,0,0,0.70);
      .banner-number
        width: 1.2rem;
        height: .4rem;
        background: rgba(0,0,0,.5);
        border-radius: .2rem;
        font-size: .24rem;
        display: flex
        justify-content center
        align-items  center
        .banner-number-text
          margin-left .07rem
</style>
